<template>
    <div class="icons">
        <div class="hot-tip-bar" v-show="isHotTip">
            <span class="icon">
                <img src="https://fms.res.meizu.com/dms/2018/03/30/99f49dfe-25c2-485a-b7b3-8b63d6487b46.png" alt="">
                魅族官方商城
            </span>
            <span class="icon">
                <img src="https://fms.res.meizu.com/dms/2018/03/30/8f1252b1-3fb2-48e2-b992-1f38a9745314.png" alt="">
                全场包邮
            </span>
            <span class="icon">
                <img src="https://fms.res.meizu.com/dms/2018/03/30/3924a1e1-5b4a-41de-9e79-ee904ec69d90.png" alt="">
                7 天无理由退货
            </span>
        </div>
        <div class="hot-site">
           <ul>
                <li>
                    <router-link to="/seller">
                        <img src="https://fms.res.meizu.com/dms/2018/04/10/26454fdf-617b-4212-9207-72ba3e4eef51.png" alt="">
                        <span>超级福利站</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/seller">
                        <img src="https://openfile.meizu.com/group1/M00/06/C4/Cgbj0Vu8GACARZblAAAUpjA0os8971.png" alt="">
                        <span>M码通道</span>
                    </router-link>
                </li> 
                <li>
                    <router-link to="/seller">
                        <img src="https://fms.res.meizu.com/dms/2018/04/10/257d15c5-428f-4678-8a3e-0082add24159.png" alt="">
                        <span>一周上新</span>
                    </router-link>
                </li> 
                <li>
                    <router-link to="/seller">
                        <img src="https://fms.res.meizu.com/dms/2018/08/23/8be92c23-5a23-49b9-b76a-59bf2292e3a3.png" alt="">
                        <span>APP专享</span>
                    </router-link>
                </li> 
            </ul> 
        </div>
    </div>
</template>
<script>
export default {
    name: "Icons",
    props:{
        isHotTip: {
            type: Boolean,
            default: false
        } 
    }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .icons
        background: $topBgColor
        margin-bottom: .2rem
        .hot-tip-bar
            background: $conBgColor
            padding: .18rem 0
            text-align: center
            .icon
                position: relative
                display: inline-block
                padding-left: .36rem
                font-size: .24rem
                color: #999
                margin: .1rem .4rem
                img 
                    position: absolute
                    width: .26rem
                    height: .26rem
                    background: #999
                    left: 0
                    border-radius: 50%
                    top: 50%
                    transform: translateY(-50%)
        .hot-site
            text-align: center
            ul
                padding-top: .3rem
                padding-bottom: .07rem
                li
                    display : inline-block
                    width: 1.5rem
                    height: 1.26rem
                    margin: 0 .07rem
                    a
                        display: block
                        img
                            display: block
                            width: .62rem
                            margin: 0 auto
                        span 
                            color: #000
                            line-height: 2.6
                            font-size: .12rem





</style>


